<template>
<div>
  <ul class="nav">
    <li>
      <router-link to="/"><i class="fa fa-music" aria-hidden="true"></i>首页</router-link>
    </li>
    <li>
      <router-link to="/catlist"><i class="fa fa-headphones" aria-hidden="true"></i>歌单</router-link>
    </li>
    <li>
      <router-link to="/video"><i class="fa fa-youtube-play" aria-hidden="true"></i>视频</router-link>
    </li>
    <li>
      <router-link to="/hot"><i class="fa fa-heart" aria-hidden="true"></i>热歌</router-link>
    </li>
    <!-- <li>
      <router-link to="/beat"><i class="fa fa-commenting-o" aria-hidden="true"></i>消息</router-link>
    </li>
    <li>
      <router-link to="/person"><i class="fa fa-user-o" aria-hidden="true"></i>我的</router-link>
    </li> -->
  </ul>
</div>
    
</template>
<style lang="less" scoped>

.nav {
  position: fixed;
  width: 100%;
  height: 65px;
  bottom: -10px;
  left: 0px;
  line-height: 50px;
  z-index: 2;
  display: flex;
  justify-content: space-around;
  background-color: #fafafa;
  align-items: flex-end;
  a {
    flex: 1;
    text-align: center;
    color: #747474;
    &.router-link-exact-active {
      color: var(--cy-Color);
      i{
        color: var(--cy-Color);
      }
    }
    i {
      width: 25px;
      height: 25px;
      bottom: 25px;
      font-size: 20px;
      margin-left: 4px;
      position: fixed;
      border-radius: 50%;
      // background-color: rgb(255, 255, 255);
    }
  }
}

</style>